<!--
 * @Descripttion:
 * @version:
 * @Author: cdy
 * @Date: 2025-06-30 10:13:46
 * @LastEditors: cdy
 * @LastEditTime: 2025-08-10 16:45:13
-->
<template>
  <div class="pageContain">
    <div class="bigTop">
      <div class="bigTopName divCenter">
        爱信(安庆)汽车零部件有限公司能源管理平台
      </div>
    </div>
    <div class="backIndex" @click="backIndexPage()"></div>
    <div class="changePage">
      <el-select v-model="changePageName" @change="changeShow()">
        <el-option label="首页大屏" value="首页大屏"></el-option>
        <el-option label="分组大屏" value="分组大屏"></el-option>
      </el-select>
    </div>
    <div class="bigCenter divJustFlex">
      <div class="bigLeft">
        <div class="forgroup">
          <div class="selectName">选择分组</div>
          <el-select
            class="big"
            v-model="selectFen"
            style="width: 8vw; color: white"
            placeholder="设备分组"
            @change="selectBig()"
          >
            <el-option
              v-for="(item, index) in selectFenList"
              :lable="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
          <div
            class="selectName"
            v-if="chooseTypeList.length > 1"
            style="margin-left: 0.5vw"
          >
            选择类型
          </div>

          <el-select
            v-if="chooseTypeList.length > 1"
            class="big"
            v-model="chooseType"
            style="width: 8vw; color: white"
            placeholder="设备类型"
            @change="changeType()"
          >
            <el-option
              v-for="(item, index) in chooseTypeList1"
              :lable="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>

        <div class="bigLeftTop" style="margin-top: 2vh">
          <div class="bigTopUse divBeteewn">
            <div class="bigChartName" ref="changeName">
              {{ changeFristName }}
            </div>
            <div class="bigUnit divFlex">
              <el-select
                v-model="selectWeather"
                style="width: 13vw; color: white; margin-right: 0.5vw"
                v-if="selectWeatherList.length > 0"
              >
                <template #prefix>
                  <div v-if="selectWeather" class="selected-item">
                    <div style="color: white">{{ selectWeather.date }}</div>
                    <div style="color: white; margin-left: 0.2vw">天气:</div>
                    <img
                      :src="findWeatherCategory(selectWeather.weather)"
                      style="width: 1vw; height: 1.8vh"
                    />
                    <div style="color: white; margin-left: 0.2vw">温度:</div>
                    <div style="color: white">{{ selectWeather.tem }}</div>
                  </div>
                </template>
                <el-option
                  v-for="(item, index) in selectWeatherList"
                  :value="item"
                >
                  <div class="weatherInner">
                    <div>{{ item.date }}</div>
                    <div style="margin-left: 0.2vw">天气:</div>
                    <img
                      :src="findWeatherCategory(item.weather)"
                      style="width: 1vw; height: 1.8vh; margin-right: 10px"
                    />
                    <div>温度:</div>
                    <div>{{ item.tem }}</div>
                  </div>
                </el-option>
              </el-select>
              <!-- <el-select
                v-model="selectedValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="margin-right: 8px; float: left">
                    <img
                      :src="item.image"
                      style="height: 32px; vertical-align: middle"
                    />
                  </span>
                  <span>{{ item.label }}</span>
                </el-option>
              </el-select> -->

              <div style="font-size: 0.8vw">时间:</div>
              <el-select
                v-model="selectLong"
                style="width: 4vw; color: white"
                @change="selectTimeDuring()"
              >
                <el-option lable="天" value="天"></el-option>
                <el-option lable="周" value="周"></el-option>
                <el-option lable="月" value="月"></el-option>
                <el-option lable="年" value="年"></el-option>
              </el-select>
              <el-checkbox
                v-model="checked"
                class="checkbox1"
                style="margin-left: 0.5vw"
                @change="hourTime = ''"
              ></el-checkbox>
              <div class="deleteWeek">自定义时间</div>
              <div style="font-size: 0.8vw; margin-left: 0.5vw">时间1:</div>
              <el-config-provider :locale="locale">
                <el-date-picker
                  v-if="selectLong == '天' && !checked"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date1"
                  type="date"
                  placeholder="时间1"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-model="date1"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-if="selectLong == '天' && checked"
                  type="datetime"
                  placeholder="时间1"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                  date-format="YYYY-MM-DD"
                  time-format="HH:mm"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '周'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date1"
                  type="week"
                  format="YYYY-ww"
                  value-format="YYYY-ww"
                  placeholder="时间1"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '月'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date1"
                  type="month"
                  placeholder="时间1"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />

                <el-date-picker
                  v-if="selectLong == '年'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date1"
                  type="year"
                  placeholder="时间1"
                  format="YYYY"
                  value-format="YYYY"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
              </el-config-provider>
              <div style="font-size: 0.8vw; margin-left: 0.5vw" v-if="checked">
                时间2:
              </div>
              <el-config-provider :locale="locale" v-if="checked">
                <!-- <el-date-picker
                  v-if="selectLong == '天'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date2"
                  type="date"
                  placeholder="时间2"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                /> -->
                <el-date-picker
                  v-model="date2"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-if="selectLong == '天' && checked"
                  type="datetime"
                  placeholder="时间1"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                  date-format="YYYY-MM-DD"
                  time-format="HH:mm"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '月'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date2"
                  type="month"
                  placeholder="时间2"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '周'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date2"
                  type="week"
                  placeholder="时间2"
                  format="YYYY-ww"
                  value-format="YYYY-ww"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '年'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date2"
                  type="year"
                  placeholder="时间2"
                  format="YYYY"
                  value-format="YYYY"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
              </el-config-provider>
            </div>
          </div>
          <div class="chart1Contain"><div class="chart1"></div></div>
        </div>

        <!-- 分组中设备 -->
        <div class="bigLeftTop" style="margin-top: 2vh">
          <div class="topSelect divBeteewn">
            <el-select
              class="big"
              v-model="selectSmallFen"
              style="
                width: 15.5vw;
                margin-left: 1vw;
                color: white;
                font-size: 0.7vw;
              "
              @change="getDefalutValue()"
              placeholder="分组设备"
            >
              <el-option
                v-for="item in selectSmallList"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <div class="bigUnit divFlex" style="padding-right: 1vw">
              <div style="font-size: 0.8vw; color: white">时间:</div>

              <el-select
                v-model="deviceLong"
                style="width: 4vw; color: white; margin-left: 0.5vw"
                @change="selectTimeDuring1()"
              >
                <el-option lable="天" value="天"></el-option>
                <el-option lable="周" value="周"></el-option>
                <el-option lable="月" value="月"></el-option>
                <el-option lable="年" value="年"></el-option>
              </el-select>
              <el-checkbox
                v-model="deviceChecked"
                class="checkbox1"
                style="margin-left: 0.5vw"
              ></el-checkbox>
              <div class="deleteWeek">自定义时间</div>
              <div style="font-size: 0.8vw; margin-left: 0.5vw; color: white">
                时间1:
              </div>
              <el-config-provider :locale="locale">
                <el-date-picker
                  v-if="deviceLong == '天' && !deviceChecked"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="deviceDate1"
                  type="date"
                  placeholder="时间1"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS1(deviceDate1, deviceDate2)"
                />
                <el-date-picker
                  v-model="deviceDate1"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-if="deviceLong == '天' && deviceChecked"
                  type="datetime"
                  placeholder="时间1"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                  date-format="YYYY-MM-DD"
                  time-format="HH:mm"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS1(dadeviceDate1te1, deviceDate2)"
                />

                <el-date-picker
                  v-if="deviceLong == '周'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="deviceDate1"
                  type="week"
                  format="YYYY-ww"
                  value-format="YYYY-ww"
                  placeholder="时间1"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS1(deviceDate1, deviceDate2)"
                />
                <el-date-picker
                  v-if="deviceLong == '月'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="deviceDate1"
                  type="month"
                  placeholder="时间1"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS1(deviceDate1, deviceDate2)"
                />

                <el-date-picker
                  v-if="deviceLong == '年'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="deviceDate1"
                  type="year"
                  placeholder="时间1"
                  :disabled-date="disabledDate"
                  format="YYYY"
                  value-format="YYYY"
                  @change="caculateTimeS1(deviceDate1, deviceDate2)"
                />
              </el-config-provider>
              <div
                style="font-size: 0.8vw; color: white; margin-left: 0.5vw"
                v-if="deviceChecked"
              >
                时间2:
              </div>
              <el-config-provider :locale="locale" v-if="deviceChecked">
                <el-date-picker
                  v-model="deviceDate2"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-if="deviceLong == '天' && deviceChecked"
                  type="datetime"
                  placeholder="时间1"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                  date-format="YYYY-MM-DD"
                  time-format="HH:mm"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS1(deviceDate1, deviceDate2)"
                />
                <el-date-picker
                  v-if="deviceLong == '月'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="deviceDate2"
                  type="month"
                  placeholder="时间2"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS1(deviceDate1, deviceDate2)"
                />
                <el-date-picker
                  v-if="deviceLong == '周'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="deviceDate2"
                  type="week"
                  placeholder="时间2"
                  format="YYYY-ww"
                  value-format="YYYY-ww"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS1(deviceDate1, deviceDate2)"
                />
                <el-date-picker
                  v-if="deviceLong == '年'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="deviceDate2"
                  type="year"
                  placeholder="时间2"
                  format="YYYY"
                  :disabled-date="disabledDate"
                  value-format="YYYY"
                  @change="caculateTimeS1(deviceDate1, deviceDate2)"
                />
              </el-config-provider>
            </div>
          </div>
          <div class="chart6"></div>
        </div>
        <!-- 碳排放量 -->
        <div class="bigLeftTop" style="margin-top: 2vh">
          <div class="topSelect divBeteewn">
            <div style="color: white; font-size: 0.8vw; margin-left: 1vw">
              碳排放量
            </div>
            <div class="bigUnit divFlex" style="padding-right: 1vw">
              <div style="font-size: 0.8vw; color: white">时间:</div>
              <el-select
                v-model="COLong"
                style="width: 4vw; color: white; margin-left: 0.5vw"
                @change="selectTimeDuring2()"
              >
                <el-option lable="天" value="天"></el-option>
                <el-option lable="周" value="周"></el-option>
                <el-option lable="月" value="月"></el-option>
                <el-option lable="年" value="年"></el-option>
              </el-select>
              <el-checkbox
                v-model="COChecked"
                class="checkbox1"
                style="margin-left: 0.5vw"
              ></el-checkbox>
              <div class="deleteWeek">自定义时间</div>
              <div style="font-size: 0.8vw; margin-left: 0.5vw; color: white">
                时间1:
              </div>
              <el-config-provider :locale="locale">
                <el-date-picker
                  v-if="COLong == '天'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="CODate1"
                  type="date"
                  placeholder="时间1"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS2(CODate1, CODate2)"
                />

                <el-date-picker
                  v-if="COLong == '周'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="CODate1"
                  type="week"
                  format="YYYY-ww"
                  value-format="YYYY-ww"
                  placeholder="时间1"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS2(CODate1, CODate2)"
                />
                <el-date-picker
                  v-if="COLong == '月'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="CODate1"
                  type="month"
                  placeholder="时间1"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS2(CODate1, CODate2)"
                />

                <el-date-picker
                  v-if="COLong == '年'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="CODate1"
                  type="year"
                  placeholder="时间1"
                  format="YYYY"
                  :disabled-date="disabledDate"
                  value-format="YYYY"
                  @change="caculateTimeS2(CODate1, CODate2)"
                />
              </el-config-provider>
              <div
                style="font-size: 0.8vw; color: white; margin-left: 0.5vw"
                v-if="COChecked"
              >
                时间2:
              </div>
              <el-config-provider :locale="locale" v-if="COChecked">
                <el-date-picker
                  v-if="COLong == '天'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="CODate2"
                  type="date"
                  placeholder="时间2"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS2(CODate1, CODate2)"
                />
                <el-date-picker
                  v-if="COLong == '月'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="CODate2"
                  type="month"
                  placeholder="时间2"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS2(CODate1, CODate2)"
                />
                <el-date-picker
                  v-if="COLong == '周'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="CODate2"
                  type="week"
                  placeholder="时间2"
                  format="YYYY-ww"
                  value-format="YYYY-ww"
                  @change="caculateTimeS2(CODate1, CODate2)"
                />
                <el-date-picker
                  v-if="COLong == '年'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="CODate2"
                  type="year"
                  placeholder="时间2"
                  format="YYYY"
                  value-format="YYYY"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS2(CODate1, CODate2)"
                />
              </el-config-provider>
            </div>
          </div>
          <div class="chart7"></div>
        </div>
      </div>
      <div class="bigRight">
        <div class="bigRightTop">
          <div class="bigTopUse divBeteewn">
            <div class="bigChartName" style="margin-top: 1.5vh">设备状态</div>
          </div>
          <div class="shebeiContain">
            <div class="chart5"></div>
            <div class="rightText">
              <div class="textBox">
                <div class="textBoxTop divFlex">
                  <div class="boxLeft">
                    <div class="dot"></div>
                    <div class="dotName" style="color: #00c659">正常设备</div>
                  </div>

                  <div class="endName" style="color: #00c03f">
                    {{ deviceStatus.online }}
                  </div>
                </div>
                <div class="sheBeiLine">
                  <div class="lineSmall"></div>
                </div>
              </div>
              <div class="textBox">
                <div class="textBoxTop divFlex">
                  <div class="boxLeft">
                    <div
                      class="dot"
                      style="
                        background: linear-gradient(to right, #fefec5, #f5f01a);
                      "
                    ></div>
                    <div class="dotName" style="color: #f8f454">告警设备</div>
                  </div>

                  <div class="endName" style="color: #f8f454">
                    {{ deviceStatus.warn }}
                  </div>
                </div>
                <div class="sheBeiLine">
                  <div
                    class="lineSmall"
                    style="
                      background: linear-gradient(to right, #fefec5, #f5f01a);
                      width: 20%;
                    "
                  ></div>
                </div>
              </div>
              <div class="textBox">
                <div class="textBoxTop divFlex">
                  <div class="boxLeft">
                    <div
                      class="dot"
                      style="
                        background: linear-gradient(to right, #f9d49e, #e63e08);
                      "
                    ></div>
                    <div class="dotName" style="color: #e74a14">离线设备</div>
                  </div>

                  <div class="endName" style="color: #e74a14">
                    {{ deviceStatus.offline }}
                  </div>
                </div>
                <div class="sheBeiLine">
                  <div
                    class="lineSmall"
                    style="
                      background: linear-gradient(to right, #f9d49e, #e63e08);
                      width: 20%;
                    "
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="smallRightLast">
          <div class="bigTopUse divBeteewn">
            <div class="bigChartName" style="margin-top: 1.5vh">告警信息</div>
          </div>
          <div class="tableContain indexPageTable">
            <el-table
              :data="dataList"
              empty-text="暂无数据"
              style="width: 100%; margin: auto; height: auto; margin-top: 1vh"
              max-height="19vh"
              :header-row-style="{
                fontSize: '0.8vw',
                color: '#00F2FF',
                backgroundColor: '#023471',
                borderBottom: '1px solid #EBEEF5',
                borderRight: '1px solid #EBEEF5',
              }"
              :cell-style="{
                fontSize: '0.6vw',
                color: 'white',
              }"
            >
              <el-table-column
                label="设备名称"
                align="center"
                prop="deviceName"
                min-width="150"
              ></el-table-column>

              <el-table-column
                label="告警时间"
                align="center"
                prop="warnTime"
                min-width="120"
              ></el-table-column>
              <el-table-column
                label="告警等级"
                align="center"
                prop="warnLevel"
                min-width="70"
              >
                <template #default="scope">
                  <div v-if="scope.row.warnLevel == 1">一级告警</div>
                  <div v-if="scope.row.warnLevel == 2">二级告警</div>
                  <div v-if="scope.row.warnLevel == 3">三级告警</div>
                </template></el-table-column
              >
              <el-table-column
                label="当前状态"
                align="center"
                prop="warnType"
                min-width="70"
              >
                <template #default="scope">
                  <div v-if="scope.row.warnType == 1">离线</div>
                  <div v-if="scope.row.warnType == 2">电压丢失</div>
                  <div v-if="scope.row.warnType == 3">电压异常</div>
                  <div v-if="scope.row.warnType == 4">超阀值</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import * as echarts from "echarts";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import service from "@/api/api";
import img1 from "@/assets/img/weather/冰雹.png";
import img2 from "@/assets/img/weather/多云.png";
import img3 from "@/assets/img/weather/风.png";
import img4 from "@/assets/img/weather/晴.png";
import img5 from "@/assets/img/weather/雾.png";
import img6 from "@/assets/img/weather/雪.png";
import img7 from "@/assets/img/weather/阴.png";
import img8 from "@/assets/img/weather/雨.png";
import {
  getToday,
  getFormatHourTime,
  getYearRange,
  generateWeekRange,
  generateMonthRange,
  getDateRange,
  completeMissingTimes,
  getTodayArr,
  createAverageArray,
  formatNumberList,
  transformData,
  transforCheckDay,
  deilWithMonth,
  deilWithYear,
  processData,
  processGuangFuDayHour,
  calculateGuangFuAverage,
  firstCityWeek,
  getChooseTime,
  deviceOptionLine4,
  deviceOption4GuangBar,
  option5Three,
  option5Ele,
  option5Gas,
  completeTimeRange,
  processGuangFuDayHour1,
  transforCheckDay1,
  transformData1,
  deilWithMonth1,
  deilWithYear1,
  getWeekDateRange,
  getMonthDates,
  arrEach,
  arrEachsingle,
  arrEachfour,
  arrEachThree,
  getYearMonths,
} from "@/mitt/until.js";

let chrat1 = null;
let chart2 = null;
let chart3 = null;
let chart4 = null;
let chart5 = null;
let chart6 = null;
let chart7 = null;
let totalNumber = [];
let userArr = [];
let upArr = [];
let productEle = [];

export default {
  data() {
    return {
      getDeviceNumberId: "",
      getDeviceNumberType: "",
      oneGroup: [],
      changeFristName: "总用电量",
      hourTime: "",
      changePageName: "分组大屏",
      selectLong: "天",
      selectFen: "",
      checked: false,
      date1: "",
      date2: "",
      locale: zhCn,
      selectFenList: [],
      selectSmallFen: "MA1号线",
      selectSmall: [],
      selectSmallList: [],
      chooseTypeList: [],
      chooseTypeList1: [],
      chooseType: null,
      deviceStatus: {
        online: 0,
        onlinePresent: 0,
        offline: 0,
        offlinePresent: 0,
        warn: 0,
        warnPresent: 0,
      },

      deviceBar: {
        tooltip: {
          trigger: "axis",
        },

        // 图例配置
        legend: {
          data: ["电力", "设定值", "均值"],
          top: 0,
          left: "center",
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },

        // 网格配置
        grid: {
          left: "3%",
          right: "8%",
          bottom: "8%",
          top: "20%",
          containLabel: true,
        },

        // X轴配置
        xAxis: [
          {
            type: "category",
            name: "时间",
            nameTextStyle: {
              color: "white",
              fontFamily: "mei",
              fontSize: 12,
            },
            axisTick: {
              show: false,
            },

            data: ["01"],
            axisLabel: {
              fontFamily: "mei",
              color: "white", // 设置为红色
              fontSize: 12, // 字体大小
            },
            axisPointer: {
              type: "shadow",
            },
          },
        ],

        // Y轴配置（双Y轴）
        yAxis: [
          {
            type: "value",
            min: 0,
            name: "t",
            nameTextStyle: {
              color: "white",
              fontFamily: "mei",
              fontSize: 12,
            },
            axisLabel: {
              formatter: "{value}",
              fontFamily: "mei",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "white",
              },
            },
          },
        ],

        // 系列配置
        series: [
          // 柱状图系列（销量）
          {
            name: "单位:(KW.h)",
            type: "bar",
            barWidth: "30%",
            data: [],
            itemStyle: {
              color: "#84CE30",
            },
          },

          // 第一条折线图（完成率）
          {
            name: "设定值",
            type: "line",
            data: [],
            itemStyle: {
              color: "#00FFF8",
            },
            symbol: "circle",
            symbolSize: 0,
            lineStyle: {
              width: 3,
            },
          },

          {
            name: "均值",
            type: "line",

            data: [],
            itemStyle: {
              color: "#EE6666",
            },
            symbolSize: 0,
            lineStyle: {
              width: 3,
            },
          },
        ],
      },
      optionLine: {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            const currentIndex = params[0].dataIndex;
            // seriesName;
            let result =
              params[0].axisValue +
              "<br/>" +
              params[0].seriesName +
              ":" +
              params[0].value +
              "<br/>";
            let sum = 0;

            for (let i = 0; i < currentIndex + 1; i++) {
              const item = totalNumber[i];
              // 将 null 视为 0
              if (item === null) {
                sum += 0;
                continue;
              }
              // 尝试转换为数字
              const num = Number(item);
              // 只有是有效数字才累加
              if (!isNaN(num)) {
                sum += num;
              }
            }

            result += `累计值: ${sum.toFixed(1)}`;
            return result;
          },
        },
        legend: {
          data: ["总功耗"],
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        grid: {
          top: "18%",
          left: "3%",
          right: "8%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          data: [],

          axisLabel: {
            // formatter: function (value) {
            //   const minutes = value.split(":")[1]; // 提取分钟部分
            //   return minutes === "00" || minutes === "30" ? value : "";
            // },
            show: true,
            hideOverlap: true,
            rotate: 0,
            // 避免空标签占用空间
            // interval: 0,
            fontFamily: "mei",
            color: "white",
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW.h",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },

          axisLabel: {
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#5D6A94",
            },
          },

          splitLine: {
            show: false,
            lineStyle: {
              color: ["#1B2648"],
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            name: "总功耗",
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            z: 1,

            itemStyle: {
              color: "#19A3DF",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            labelLayout: { hideOverlap: true },
            data: [
              0.55, 0.15, 0.28, 0.84, 0.33, 0.15, 0.95, 0.18, 0.84, 0.83, 0.55,
              0.55, 0.15, 0.28, 0.83, 0.55, 0.65, 0.78, 0.84, 0.83, 0.15, 0.28,
              0.84, 0.33,
            ],
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            smooth: true,
          },
        ],
      },

      option1: {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            const currentIndex = params[0].dataIndex;

            // seriesName;
            let result =
              params[0].axisValue +
              "<br/>" +
              params[0].seriesName +
              ":" +
              params[0].value +
              "<br/>";
            let sum = 0;

            for (let i = 0; i < currentIndex + 1; i++) {
              const item = totalNumber[i];
              // 将 null 视为 0
              if (item === null) {
                sum += 0;
                continue;
              }
              // 尝试转换为数字
              const num = Number(item);
              // 只有是有效数字才累加
              if (!isNaN(num)) {
                sum += num;
              }
            }

            result += `累计值: ${sum.toFixed(1)}`;
            return result;
          },
        },
        grid: {
          top: "18%",
          left: "3%",
          right: "8%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          data: [],

          axisLabel: {
            formatter: function (value) {
              const minutes = value.split(":")[1]; // 提取分钟部分
              return minutes === "00" || minutes === "30" ? value : "";
            },
            rotate: 1,
            // 避免空标签占用空间
            interval: 0,
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW.h",
          // nameLocation: "start",

          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          axisLabel: {
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#5D6A94",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#1B2648"],
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            name: "总功耗",
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            z: 1,

            itemStyle: {
              color: "#19A3DF",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            labelLayout: { hideOverlap: true },
            data: [],
            smooth: true,
          },
        ],
      },
      option1GuangBar: {
        legend: {
          data: ["光伏1", "光伏2"],
          top: 0,
          left: "center",
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "axis",
          // formatter: function (params) {
          //   // seriesName;

          //   let result =
          //     params[0].axisValue +
          //     "<br/>" +
          //     params[0].seriesName +
          //     ":" +
          //     params[0].value +
          //     "<br/>" +
          //     params[1].seriesName +
          //     ":" +
          //     params[1].value;
          //   return result;
          // },
        },
        grid: {
          top: "18%",
          left: "3%",
          right: "8%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          data: [],
          rotate: 45,
          axisLabel: {
            show: true,
            rotate: 45,
            // 避免空标签占用空间
            interval: 0,
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW.h",
          // nameLocation: "start",

          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          axisLabel: {
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#5D6A94",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#1B2648"],
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            name: "光伏1",
            data: [],
            barWidth: "70%",
            barMaxWidth: 18,
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#78B029",
            },
          },
          {
            name: "光伏2",
            data: [],
            barWidth: "70%",
            barMaxWidth: 18,
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#00C0E0",
            },
          },
        ],
      },
      option1GuangDay: {
        legend: {
          data: ["用电量", "上网电量"],
          top: 0,
          left: "center",
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // seriesName;

            let total = 0;
            for (let i = 0; i < params[0].dataIndex + 1; i++) {
              total += productEle[i];
            }
            if (params.length == 2) {
              let result =
                params[0].axisValue +
                "<br/>" +
                params[0].seriesName +
                ":" +
                params[0].value +
                "<br/>" +
                params[1].seriesName +
                ":" +
                params[1].value +
                "<br/>" +
                "发电量:" +
                productEle[params[0].dataIndex] +
                "<br/>" +
                "累计:" +
                total.toFixed(1);

              return result;
            } else if (params.length == 1) {
              if (params[0].seriesName == "上网电量") {
                let result =
                  params[0].axisValue +
                  "<br/>" +
                  params[0].seriesName +
                  ":" +
                  params[0].value +
                  "<br/>" +
                  "发电量:" +
                  productEle[params[0].dataIndex] +
                  "<br/>" +
                  "累计:" +
                  total.toFixed(1);

                return result;
              } else if (params[0].seriesName == "用电量") {
                let result =
                  params[0].axisValue +
                  "<br/>" +
                  params[0].seriesName +
                  ":" +
                  params[0].value +
                  "<br/>" +
                  "发电量:" +
                  productEle[params[0].dataIndex] +
                  "<br/>" +
                  "累计:" +
                  total.toFixed(1);

                return result;
              }
            }
          },
        },
        grid: {
          top: "18%",
          left: "3%",
          right: "8%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          data: [],

          axisLabel: {
            // formatter: function (value) {
            //   const minutes = value.split(":")[1]; // 提取分钟部分
            //   return minutes === "00" || minutes === "30" ? value : "";
            // },
            show: true,
            hideOverlap: true,
            rotate: 0,
            // 避免空标签占用空间
            // interval: 0,
            fontFamily: "mei",
            color: "white",
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "电力KW.h",
          // nameLocation: "start",

          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          axisLabel: {
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#5D6A94",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#1B2648"],
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            name: "用电量",
            // barWidth: "30%",
            data: [],
            itemStyle: {
              color: "#19A3DF",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20,
              },
            },
            smooth: true,
          },
          {
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            name: "上网电量",
            // barWidth: "30%",
            data: [],
            itemStyle: {
              color: "#78B029",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#78B029",
            },
            label: {
              show: false,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20,
              },
            },
            smooth: true,
          },
        ],
      },

      option3: {
        grid: { left: 0, right: 0 },
        tooltip: {
          show: true,
          position: "right",
        },
        series: [
          {
            name: "设备状态",
            type: "pie",
            radius: ["65%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            color: ["#E74A14", "#F8F454", "#00C659"],
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },

      dataList: [
        { name: "XXXX采集器", SN: "SN号", level: "一级告警", state: "离线" },
        {
          name: "XXXX采集器",
          SN: "SN号",
          level: "三级告警",
          state: "电压丢失",
        },
        { name: "XXXX采集器", SN: "SN号", level: "一级告警", state: "离线" },
        {
          name: "XXXX采集器",
          SN: "SN号",
          level: "二级告警",
          state: "电压丢失",
        },
      ],
      selectLong: "天",
      bigScreen: false,
      option4: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["电力", "设定值", "均值"],
          top: 0,
          left: "center",
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },

        // 网格配置
        grid: {
          left: "3%",
          right: "8%",
          bottom: "8%",
          top: "20%",
          containLabel: true,
        },

        // X轴配置
        xAxis: [
          {
            type: "category",
            name: "时间",
            nameTextStyle: {
              color: "white",
              fontFamily: "mei",
              fontSize: 12,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: function (value) {
                return value;
              },

              color: "white", // 设置为红色
              fontSize: 12, // 字体大小
              fontFamily: "mei",
              hideOverlap: true,
            },
            axisLine: {
              lineStyle: {
                color: "#5D6A94",
              },
            },
            data: [],
          },
        ],

        // Y轴配置（双Y轴）
        yAxis: [
          {
            type: "value",
            min: 0,

            axisLabel: {
              formatter: "{value}",
              fontFamily: "mei",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#5D6A94",
              },
            },
            axisLabel: {
              formatter: function (value) {
                return value;
              },
              color: "white", // 设置为红色
              fontSize: 12, // 字体大小
              fontFamily: "mei",
            },
          },
        ],

        // 系列配置
        series: [
          {
            name: "电力",
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            data: [],
            itemStyle: {
              color: "#84CE30",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            smooth: true,
          },

          // 第一条折线图（完成率）
          {
            name: "设定值",
            type: "line",
            data: [],
            itemStyle: {
              color: "#00FFF8",
            },
            symbol: "circle",
            symbolSize: 0,
            lineStyle: {
              width: 3,
            },
          },

          {
            name: "均值",
            type: "line",

            data: [],
            itemStyle: {
              color: "#EE6666",
            },
            symbolSize: 0,
            lineStyle: {
              width: 3,
            },
          },
        ],
      },

      option5: {
        // 标题配置
        tooltip: {
          trigger: "axis",
        },
        // 提示框配置
        grid: {
          left: "3%",
          right: "10%",
          top: "20%",
          bottom: "18%",
        },
        legend: {
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          data: ["电力"],
          top: 0,
          left: "center",
          textStyle: {
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "时间",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "white",
            fontWeight: 600,
            fontFamily: "mei",
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        },
        yAxis: {
          name: "单位:t-CO₂",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisLabel: {
            color: "white",

            fontSize: 10,
            fontFamily: "mei",
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "电力",
            data: [40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40],
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#78B029",
            },
            barWidth: "50%",
            barMaxWidth: 20,
          },
        ],
      },

      groupId: null,
      // 分组设备参数
      deviceLong: "天",
      deviceChecked: false,
      deviceDate1: "",
      deviceDate2: "",
      deviceId: null,
      defaultValue: null,
      deviceType: "",
      // 碳排放参数
      COLong: "天",
      COChecked: false,
      CODate1: "",
      CODate2: "",
      selectWeather: {
        data: "2025-08-02",
        weather: "晴",
        tem: "25-30℃",
      },
      selectWeatherList: [],

      selectedValue: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    // c处理天气函数
    async getWeather() {
      let parmas = {};
      if (this.date1 && !this.checked && this.selectLong == "天") {
        parmas = {
          date: this.date1,
        };
      } else if (
        this.date1 &&
        this.date2 &&
        this.checked &&
        this.selectLong == "天"
      ) {
        let date1 = this.date1.split(" ")[0];
        let date2 = this.date2.split(" ")[0];

        parmas = {
          startDate: date1,
          endDate: date2,
        };
      }
      let res = await service({
        method: "get",
        url: "/weather/query",
        params: parmas,
      });

      let data = res.data;
      let arr = [];
      if (data.length > 0) {
        data.forEach((item) => {
          arr.push({
            date: item.date,
            tem: item.nighttemp + "-" + item.daytemp + "℃",
            weather: item.weather,
          });
        });
        this.selectWeatherList = arr;

        this.selectWeather = this.selectWeatherList[0];
      } else {
        this.selectWeatherList = [];
        this.selectWeather = "";
      }
    },
    // 处理天气情况返回数据
    findWeatherCategory(weather) {
      const iconWeatherMap = {
        风: [
          "有风",
          "平静",
          "微风",
          "和风",
          "清风",
          "强风/劲风",
          "疾风",
          "大风",
          "烈风",
          "风暴",
          "狂爆风",
          "飓风",
          "热带风暴",
          "龙卷风",
        ],
        多云: ["少云", "晴间多云", "多云"],
        雪: [
          "雪",
          "阵雪",
          "小雪",
          "中雪",
          "大雪",
          "暴雪",
          "小雪-中雪",
          "中雪-大雪",
          "大雪-暴雪",
          "冷",
          "雨雪天气",
          "雨夹雪",
          "阵雨夹雪",
        ],
        雾: [
          "浮尘",
          "扬沙",
          "沙尘暴",
          "强沙尘暴",
          "雾",
          "浓雾",
          "强浓雾",
          "轻雾",
          "大雾",
          "特强浓雾",
        ],
        晴: ["晴", "热"],
        冰雹: ["冰雹", "雹"],
        雨: [
          "阵雨",
          "雷阵雨",
          "雷阵雨并伴有冰雹",
          "小雨",
          "中雨",
          "大雨",
          "暴雨",
          "大暴雨",
          "特大暴雨",
          "强阵雨",
          "强雷阵雨",
          "极端降雨",
          "毛毛雨/细雨",
          "雨",
          "小雨-中雨",
          "中雨-大雨",
          "大雨-暴雨",
          "暴雨-大暴雨",
          "大暴雨-特大暴雨",
          "冻雨",
        ],
        阴: ["阴", "霾", "中度霾", "重度霾", "严重霾", "未知", "冷"],
      };
      for (const [category, weathers] of Object.entries(iconWeatherMap)) {
        if (weathers.includes(weather)) {
          if (category == "冰雹") {
            return img1;
          } else if (category == "多云") {
            return img2;
          } else if (category == "风") {
            return img3;
          } else if (category == "晴") {
            return img4;
          } else if (category == "雾") {
            return img5;
          } else if (category == "雪") {
            return img6;
          } else if (category == "阴") {
            return img7;
          } else if (category == "雨") {
            return img8;
          }
        }
      }
      return img7; // 未找到
    },
    // 处理分组碳排放
    async getWaring() {
      let res = await service({
        method: "get",
        url: "/report/device-warn-group",
        params: {
          groupId: this.groupId,
        },
      });
      this.dataList = res.data;
    },
    async getCOLineNumber() {
      let type = null;
      let data = {};
      let time1 = [];
      type = getChooseTime(this.COLong);

      if (this.COChecked) {
        if (!this.CODate2 || !this.CODate1) {
          this.$message({
            message: "自定义状态下,时间1与时间2必须同时存在",
            type: "warning",
          });
        } else {
          if (type == 2) {
            data = {
              type: type,
              flag: this.COChecked,
              groupId: this.groupId,
              startTime: this.CODate1.replace("-", ""),
              endTime: this.CODate2.replace("-", ""),
            };
          } else {
            data = {
              type: type,
              flag: this.COChecked,
              startTime: this.CODate1,
              groupId: this.groupId,
              endTime: this.CODate2,
            };
          }
        }
      } else if (!this.COChecked) {
        if (!this.CODate1) {
          this.$message({
            message: "时间1不可缺少",
            type: "warning",
          });
        }
        if (type == 2) {
          data = {
            type: type,
            flag: this.COChecked,
            groupId: this.groupId,
            startTime: this.CODate1.replace("-", ""),
          };
        } else {
          data = {
            type: type,
            flag: this.COChecked,
            groupId: this.groupId,
            startTime: this.CODate1,
          };
        }
      }
      // return;

      let res = await service({
        method: "get",
        url: "/report/carbon-emissions-group",
        params: data,
      });
      let flag = true;
      if (res.status == "SUCCESS") {
        this.loading = false;
      }
      let numberList;

      if (res.data) {
        numberList = res.data.data;
      } else {
        numberList = [];
      }

      if (!this.COChecked && this.COLong == "天") {
        if (this.CODate1 == getToday()) {
          time1 = getFormatHourTime("4");
        } else {
          time1 = getFormatHourTime("3");
        }
      } else if (this.COChecked && this.COLong == "天") {
        let date1 = this.CODate1;
        let date2 = this.CODate2;
        time1 = getDateRange(date1, date2);
      } else if (!this.COChecked && this.COLong == "周") {
        let week1 = this.CODate1;
        time1 = getWeekDateRange(week1);
      } else if (this.COChecked && this.COLong == "周") {
        let week1 = this.CODate1;
        let week2 = this.CODate2;

        time1 = firstCityWeek(week1, week2);
      } else if (!this.COChecked && this.COLong == "月") {
        time1 = getMonthDates(this.CODate1);
      } else if (this.COChecked && this.COLong == "月") {
        time1 = generateMonthRange(this.CODate1, this.CODate2);
      } else if (!this.COChecked && this.COLong == "年") {
        time1 = getYearMonths(this.CODate1);
        console.log(time1);
      } else if (this.COChecked && this.COLong == "年") {
        // time1 = generateMonthRange(this.date1, this.date2);
        time1 = getYearRange(this.CODate1, this.CODate2);
      }

      let time = [],
        timeAndNumber = [],
        timeAndNumber1 = [],
        timeAndNumber2 = [],
        number1 = [],
        number = [],
        number2 = [];
      try {
        if (!numberList) {
          return;
        }
      } catch (error) {}

      if (!this.COChecked) {
        if (this.COLong == "天") {
          if (numberList.length > 0) {
            const [arr1, arr2, arr3] = processGuangFuDayHour(numberList);

            timeAndNumber = completeMissingTimes(time1, arr1);
            timeAndNumber1 = completeMissingTimes(time1, arr2);
            timeAndNumber2 = completeMissingTimes(time1, arr3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          } else {
            time1.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
              number1.push(item[1]);
              number2.push(item[1]);
            });
          }
          // this.option1 = this.optionLine;
        } else if (this.COLong == "周") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            numberList = completeMissingTimes(time1, numberList);
            numberList.forEach((item) => {
              const [yearWeek, value, value1, value2] = item;
              time.push(yearWeek);
              number.push(value);
              number1.push(value1);
              number2.push(value2);
            });
          }
        } else if (this.COLong == "月") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            console.log(time1);
            numberList = completeMissingTimes(time1, numberList);

            numberList.forEach((item) => {
              const [yearWeek, value, value1, value2] = item;
              time.push(yearWeek);
              number.push(value);
              number1.push(value1);
              number2.push(value2);
            });
          }
        } else if (this.COLong == "年") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            numberList.forEach((item) => {
              item[0] = item[0] + "月";
            });
            numberList = completeMissingTimes(time1, numberList);
            console.log(numberList);
            arrEachfour(numberList, time, number, number1, number2);
            console.log(number2);
          }
        }
      } else if (this.COChecked) {
        if (this.COLong == "天") {
          if (numberList.length == 0) {
            time1.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
              number1.push(item[1]);
              number2.push(item[1]);
            });
          } else {
            const { array1, array2, array3 } = transforCheckDay1(numberList);
            timeAndNumber = completeMissingTimes(time1, array1);
            timeAndNumber1 = completeMissingTimes(time1, array2);
            timeAndNumber2 = completeMissingTimes(time1, array3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          }
        } else if (this.COLong == "周") {
          if (numberList.length == 0) {
            time1.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
              number1.push(item[1]);
              number2.push(item[1]);
            });
          } else {
            const { array1, array2, array3 } = transformData1(numberList);

            timeAndNumber = completeMissingTimes(time1, array1);
            timeAndNumber1 = completeMissingTimes(time1, array2);
            timeAndNumber2 = completeMissingTimes(time1, array3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          }
        } else if (this.COLong == "月") {
          if (numberList.length == 0) {
            time1.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
              number1.push(item[1]);
              number2.push(item[1]);
            });
          } else {
            const [result1, result2, result3] = deilWithMonth1(numberList);
            timeAndNumber = completeMissingTimes(time1, result1);
            timeAndNumber1 = completeMissingTimes(time1, result2);
            timeAndNumber2 = completeMissingTimes(time1, result3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          }
        } else if (this.COLong == "年") {
          if (numberList.lengh == 0) {
            time1.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
              number1.push(item[1]);
              number2.push(item[1]);
            });
          } else {
            const [result1, result2, result3] = deilWithYear1(numberList);
            timeAndNumber = completeMissingTimes(time1, result1);
            timeAndNumber1 = completeMissingTimes(time1, result2);
            timeAndNumber2 = completeMissingTimes(time1, result3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          }
        }
      }
      if (res.data.hasElectricity && res.data.hasGas && res.data.hasPv) {
        this.option5 = option5Three;
        this.option5.xAxis.data = time;
        this.option5.series[0].data = number;
        this.option5.series[1].data = number1;
        this.option5.series[2].data = number2;
      }
      // 只存在电
      else if (res.data.hasElectricity && !res.data.hasGas && !res.data.hasPv) {
        this.option5 = option5Ele;
        this.option5.xAxis.data = time;
        this.option5.legend.data = ["电力"];
        this.option5.series[0].name = "电力";
        this.option5.series[0].data = number;
      }
      // 存在电和燃气
      else if (res.data.hasElectricity && res.data.hasGas && !res.data.hasPv) {
        this.option5 = option5Gas;
        this.option5.xAxis.data = time;
        this.option5.legend.data = ["电力", "燃气"];
        this.option5.series[0].name = "电力";
        this.option5.series[1].name = "燃气";
        this.option5.series[0].data = number;
        this.option5.series[1].data = number1;
      }
      // 存在电和光伏
      else if (res.data.hasElectricity && !res.data.hasGas && res.data.hasPv) {
        this.option5 = option5Gas;
        this.option5.xAxis.data = time;
        this.option5.legend.data = ["电力", "光伏"];
        this.option5.series[0].name = "电力";
        this.option5.series[1].name = "光伏";
        this.option5.series[0].data = number;
        this.option5.series[1].data = number2;
      }
      // 存在燃气和光伏
      else if (!res.data.hasElectricity && res.data.hasGas && res.data.hasPv) {
        this.option5 = option5Gas;
        this.option5.xAxis.data = time;
        this.option5.legend.data = ["燃气", "光伏"];
        this.option5.series[0].name = "燃气";
        this.option5.series[1].name = "光伏";
        this.option5.series[0].data = number1;
        this.option5.series[1].data = number2;
      }
      // 只存在燃气
      else if (!res.data.hasElectricity && res.data.hasGas && !res.data.hasPv) {
        this.option5 = option5Ele;
        this.option5.legend.data = ["燃气"];
        this.option5.series[0].name = "燃气";
        this.option5.xAxis.data = time;
        this.option5.series[0].data = number1;
      }
      // 只存在光伏
      else if (!res.data.hasElectricity && !res.data.hasGas && res.data.hasPv) {
        this.option5 = option5Ele;
        this.option5.legend.data = ["光伏"];
        this.option5.series[0].name = "光伏";
        this.option5.xAxis.data = time;
        this.option5.series[0].data = number2;
      }
      console.log(this.option5);
      // if (flag == false) {
      //   this.option5 = option5Ele;
      //   this.option5.xAxis.data = time;
      //   this.option5.series[0].data = number;
      // } else {
      //   this.option5 = option5Gas;
      //   this.option5.xAxis.data = time;
      //   this.option5.series[0].data = number;
      //   this.option5.series[1].data = number1;
      // }

      chart7.setOption(this.option5, {
        notMerge: true, // 不合并旧配置
        lazyUpdate: true,
      });
    },
    // 添加时间点

    changeSelectHour() {
      if (this.date1) {
        // let time = this.date1 + " " + this.hourTime;
        this.getLineNumber();
      }
    },

    getDefalutValue() {
      this.selectSmallList.forEach((item) => {
        if (item.name == this.selectSmallFen) {
          this.defaultValue = item.defaultValue;
          this.getDeviceNumberId = item.id;
          this.getDeviceNumberType = item.type;
          if (!this.defaultValue) {
            this.defaultValue = 0;
          }
          this.changeDeviceNumber();
        }
      });
    },
    disabledDate(time) {
      // 只允许选择今天之后的日期
      return time.getTime() > new Date().getTime();
    },
    selectTimeDuring() {
      this.date1 = "";
      this.date2 = "";
      this.hourTime = "";
    },
    selectTimeDuring1() {
      this.deviceDate1 = "";
      this.deviceDate2 = "";
    },
    selectTimeDuring2() {
      this.CODate1 = "";
      this.CODate2 = "";
    },

    caculateTimeS(a, b) {
      if (this.checked) {
        if (this.selectLong == "天") {
          if (a && b) {
            let time1 = new Date(a).getTime();
            let time2 = new Date(b).getTime();
            let actualTime = (time2 - time1) / 1000;
            if (actualTime < 0) {
              this.date2 = "";
              return this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getLineNumber();
            }
          }
        } else if (this.selectLong == "周") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.date2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getLineNumber();
            }
          }
        } else if (this.selectLong == "月") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.date2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getLineNumber();
            }
          }
        } else if (this.selectLong == "年") {
          if (a && b) {
            let time1 = a;
            let time2 = b;
            if (time1 > time2) {
              this.date2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getLineNumber();
            }
          }
        }
      } else {
        this.getLineNumber();
      }
    },
    caculateTimeS1(a, b) {
      if (this.deviceChecked) {
        if (this.deviceLong == "天") {
          if (a && b) {
            let time1 = new Date(a).getTime();
            let time2 = new Date(b).getTime();
            let actualTime = (time2 - time1) / 1000;
            if (actualTime < 0) {
              this.deviceDate2 = "";
              return this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getDeviceNumber();
            }
          }
        } else if (this.deviceLong == "周") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.deviceDate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getDeviceNumber();
            }
          }
        } else if (this.deviceLong == "月") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.deviceDate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getDeviceNumber();
            }
          }
        } else if (this.deviceLong == "年") {
          if (a && b) {
            let time1 = a;
            let time2 = b;
            if (time1 > time2) {
              this.deviceDate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getDeviceNumber();
            }
          }
        }
      } else {
        this.getDeviceNumber();
      }
    },
    caculateTimeS2(a, b) {
      if (this.COChecked) {
        if (this.COLong == "天") {
          if (a && b) {
            let time1 = new Date(a).getTime();
            let time2 = new Date(b).getTime();
            let actualTime = (time2 - time1) / 1000;
            if (actualTime < 0) {
              this.CODate2 = "";
              return this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCOLineNumber();
            }
          }
        } else if (this.COLong == "周") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.CODate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCOLineNumber();
            }
          }
        } else if (this.COLong == "月") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.CODate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCOLineNumber();
            }
          }
        } else if (this.COLong == "年") {
          if (a && b) {
            let time1 = a;
            let time2 = b;
            if (time1 > time2) {
              this.CODate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCOLineNumber();
            }
          }
        }
      } else {
        this.getCOLineNumber();
      }
    },
    // 单个设备数据
    changeDeviceNumber() {
      this.selectSmallList.forEach((element) => {
        if (element.name == this.selectSmallFen) {
          this.deviceId = element.id;
          this.defaultValue = element.defaultValue;
          if (!this.defaultValue) {
            this.defaultValue = 0;
          }
        }
      });
      this.getDeviceNumber();
    },
    // 获取分组数据
    async getDeviceNumber() {
      let type = null;
      type = getChooseTime(this.deviceLong);

      let data = {};
      let time1 = [];
      if (this.deviceChecked) {
        if (!this.deviceDate1 || !this.deviceDate2) {
          this.$message({
            message: "自定义状态下,时间1与时间2必须同时存在",
            type: "warning",
          });
        } else {
          if (type == 2) {
            data = {
              type: type,
              deviceId: this.getDeviceNumberId,
              flag: this.deviceChecked,
              startTime: this.deviceDate1.replace("-", ""),
              endTime: this.deviceDate2.replace("-", ""),
            };
          } else {
            data = {
              type: type,
              flag: this.deviceChecked,
              deviceId: this.getDeviceNumberId,
              startTime: this.deviceDate1,
              endTime: this.deviceDate2,
            };
          }
        }
      } else if (!this.deviceChecked) {
        if (!this.deviceDate1) {
          this.$message({
            message: "时间1不可缺少",
            type: "warning",
          });
        }
        if (type == 2) {
          data = {
            type: type,
            flag: this.deviceChecked,
            deviceId: this.getDeviceNumberId,
            startTime: this.deviceDate1.replace("-", ""),
          };
        } else {
          data = {
            type: type,
            flag: this.deviceChecked,
            startTime: this.deviceDate1,
            deviceId: this.getDeviceNumberId,
          };
        }
      }
      let arrvrage = [];

      let res = await service({
        method: "get",
        url: "/report/device-stat-data",
        params: data,
      });
      try {
        if (res) {
        }
      } catch (error) {
        return;
      }
      if (!this.deviceChecked && this.deviceLong == "天") {
        if (this.deviceDate1 == getToday()) {
          time1 = getTodayArr("1");
        } else {
          time1 = getTodayArr("2");
        }
      } else if (this.deviceChecked && this.deviceLong == "天") {
        let deviceDate1 = this.deviceDate1;
        let deviceDate2 = this.deviceDate2;
        time1 = completeTimeRange(deviceDate1, deviceDate2);
      } else if (!this.deviceChecked && this.deviceLong == "周") {
        let week1 = this.deviceDate1;
        time1 = getWeekDateRange(week1);
        console.log("time=", time1);
      } else if (this.deviceChecked && this.deviceLong == "周") {
        let week1 = this.deviceDate1;
        let week2 = this.deviceDate2;
        time1 = generateWeekRange(week1, week2);
      } else if (!this.deviceChecked && this.deviceLong == "月") {
        time1 = getMonthDates(this.deviceDate1);
        console.log("time=", time1);
      } else if (this.deviceChecked && this.deviceLong == "月") {
        time1 = generateMonthRange(this.deviceDate1, this.deviceDate2);
      } else if (!this.deviceChecked && this.deviceLong == "年") {
        time1 = getYearMonths(this.deviceDate1);
        console.log("time=", time1);
      } else if (this.deviceChecked && this.deviceLong == "年") {
        time1 = getYearRange(this.deviceDate1, this.deviceDate2);
      }
      let numberList = res.data;
      let timeAndNumber = [],
        timeAndNumber1 = [];
      let defaultValue = [];
      let time = [],
        number = [],
        number1 = [];
      if (this.getDeviceNumberType != 4) {
        if (!this.deviceChecked) {
          if (this.deviceLong == "天") {
            if (numberList.length > 0) {
              timeAndNumber = processData(numberList);

              timeAndNumber = completeMissingTimes(time1, timeAndNumber);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              arrvrage = createAverageArray(number);
            } else {
              timeAndNumber = completeMissingTimes(time1, timeAndNumber);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          } else if (this.deviceLong == "周") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              numberList = completeMissingTimes(time1, numberList);
              console.log(numberList);
              numberList.forEach((item) => {
                const [yearWeek, value, value1] = item;
                time.push(yearWeek);
                number.push(value);
              });
            }
          } else if (this.deviceLong == "月") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              numberList = completeMissingTimes(time1, numberList);

              numberList.forEach((item) => {
                const [yearWeek, value, value1] = item;
                time.push(yearWeek);
                number.push(value);
              });
            }
          } else if (this.deviceLong == "年") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "月";
              });
              numberList = completeMissingTimes(time1, numberList);

              numberList.forEach((item) => {
                const [yearWeek, value, value1] = item;
                time.push(yearWeek);
                number.push(value);
              });
            }
          }
        } else if (this.deviceChecked) {
          if (this.deviceLong == "天") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          } else if (this.deviceLong == "周") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              timeAndNumber = formatNumberList(numberList);
              timeAndNumber = completeMissingTimes(time1, timeAndNumber);

              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          } else if (this.deviceLong == "月") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "月";
              });
              timeAndNumber = completeMissingTimes(time1, numberList);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          } else if (this.deviceLong == "年") {
            if (numberList.lengh == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "年";
              });
              timeAndNumber = [];
              timeAndNumber = completeMissingTimes(time1, numberList);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          }
        }
        number.forEach((item) => {
          if (this.defaultValue) {
            defaultValue.push(this.defaultValue);
          } else {
            defaultValue.push(0);
          }
        });
        arrvrage = createAverageArray(number);
      } else {
        if (!this.deviceChecked) {
          if (this.deviceLong == "天") {
            if (numberList.length > 0) {
              const [arr1, arr2] = processGuangFuDayHour1(numberList);

              timeAndNumber = completeMissingTimes(time1, arr1);
              timeAndNumber1 = completeMissingTimes(time1, arr2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });

              arrvrage = calculateGuangFuAverage(number, number1);

              // defaultValue = createAverageArray(number);
            } else {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            }
          } else if (this.deviceLong == "周") {
            if (numberList.length == 0) {
              arrEachThree(time1, time, number, number1);
            } else {
              numberList = completeMissingTimes(time1, numberList);
              numberList.forEach((item) => {
                const [yearWeek, value, value1] = item;
                time.push(yearWeek);
                number.push(value);
                number1.push(value1);
              });
            }
          } else if (this.deviceLong == "月") {
            if (numberList.length == 0) {
              arrEachThree(time1, time, number, number1);
            } else {
              numberList = completeMissingTimes(time1, numberList);
              arrEachThree(numberList, time, number, number1);
            }
          } else if (this.deviceLong == "年") {
            if (numberList.length == 0) {
              arrEachThree(time1, time, number, number1);
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "月";
              });
              numberList = completeMissingTimes(time1, numberList);
              arrEachThree(numberList, time, number, number1);
            }
          }
        } else if (this.deviceChecked) {
          if (this.deviceLong == "天") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const { array1, array2 } = transforCheckDay(numberList);
              timeAndNumber = completeMissingTimes(time1, array1);
              timeAndNumber1 = completeMissingTimes(time1, array2);

              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.deviceLong == "周") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const { array1, array2 } = transformData(numberList);
              timeAndNumber = completeMissingTimes(time1, array1);
              timeAndNumber1 = completeMissingTimes(time1, array2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.deviceLong == "月") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const [result1, result2] = deilWithMonth(numberList);
              timeAndNumber = completeMissingTimes(time1, result1);
              timeAndNumber1 = completeMissingTimes(time1, result2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.deviceLong == "年") {
            if (numberList.lengh == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const [result1, result2] = deilWithYear(numberList);
              timeAndNumber = completeMissingTimes(time1, result1);
              timeAndNumber1 = completeMissingTimes(time1, result2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          }
        }
        number.forEach((item) => {
          if (this.defaultValue) {
            defaultValue.push(this.defaultValue);
          } else {
            defaultValue.push(0);
          }
        });
        arrvrage = calculateGuangFuAverage(number, number1);
      }
      defaultValue = [];
      number.forEach((item) => {
        if (this.defaultValue) {
          defaultValue.push(this.defaultValue);
        } else {
          defaultValue.push(0);
        }
      });

      if (this.getDeviceNumberType != 4) {
        this.option4 = deviceOptionLine4;
        this.option4.series[0].data = number;

        this.option4.series[1].data = defaultValue;
        this.option4.series[2].data = arrvrage;
      } else {
        this.option4 = deviceOption4GuangBar;
        this.option4.series[0].data = number;
        this.option4.series[1].data = number1;
        this.option4.series[2].data = defaultValue;
        this.option4.series[3].data = arrvrage;

        this.option4.xAxis.data = time;
      }

      if (this.getDeviceNumberType == 2) {
        const newOption = {
          ...this.option4,
          legend: {
            ...this.option4.legend,
            data: ["燃气", "设定值", "均值"], // 修改这里
          },
          xAxis: [
            {
              ...this.option4.xAxis[0],
              data: time,
            },
          ],
          yAxis: [
            {
              ...this.option4.yAxis[0],
              data: time,
              max: null,
              min: null,
              name: "单位:m³",
            },
          ],
          series: [
            {
              ...this.option4.series[0],
              data: number,
              name: "燃气",
              type: "line",
            },

            {
              ...this.option4.series[1],
              data: defaultValue,
              name: "设定值",
              type: "line",
            },

            {
              ...this.option4.series[2],
              data: arrvrage,
              name: "均值",
              type: "line",
            },
          ],
        };
        this.option4 = newOption;
      } else if (this.getDeviceNumberType == 4) {
      } else {
        const newOption = {
          ...this.option4,
          legend: {
            ...this.option4.legend,
            data: ["电力", "设定值", "均值"], // 修改这里
          },
          xAxis: [
            {
              ...this.option4.xAxis[0],
              data: time,
              rotate: 0,
            },
          ],
          yAxis: [
            {
              ...this.option4.yAxis[0],
              data: time,
              max: null,
              min: null,
              name: "单位:KW.h",
              nameTextStyle: {
                color: "white",
                fontFamily: "mei",
                fontSize: 12,
              },
            },
          ],
          series: [
            {
              ...this.option4.series[0],
              data: number,
              name: "电力",
            },

            {
              ...this.option4.series[1],
              data: defaultValue,
              name: "设定值",
            },

            {
              ...this.option4.series[2],
              data: arrvrage,
              name: "均值",
            },
          ],
        };
        this.option4 = newOption;
      }

      chart6.setOption(this.option4, {
        notMerge: true, // 不合并旧配置
        lazyUpdate: true,
      });
    },
    async getLineNumber() {
      let type = null;
      type = getChooseTime(this.selectLong);

      let data = {};
      let time1 = [];

      if (this.checked) {
        if (!this.date2 || !this.date1) {
          this.$message({
            message: "自定义状态下,时间1与时间2必须同时存在",
            type: "warning",
          });
        } else {
          if (type == 2) {
            data = {
              type: type,
              groupId: this.groupId,
              flag: this.checked,
              deviceType: this.deviceType,
              startTime: this.date1.replace("-", ""),
              endTime: this.date2.replace("-", ""),
            };
          } else {
            data = {
              type: type,
              flag: this.checked,
              deviceType: this.deviceType,
              groupId: this.groupId,
              startTime: this.date1,
              endTime: this.date2,
            };
          }
        }
      } else if (!this.checked) {
        if (!this.date1) {
          this.$message({
            message: "时间1不可缺少",
            type: "warning",
          });
        }

        if (type == 2) {
          data = {
            type: type,
            flag: this.checked,
            deviceType: this.deviceType,
            groupId: this.groupId,
            startTime: this.date1.replace("-", ""),
          };
        } else if (type == 1) {
          if (this.hourTime) {
            data = {
              type: type,
              flag: this.checked,
              deviceType: this.deviceType,
              startTime: this.date1 + " " + this.hourTime,
              groupId: this.groupId,
            };
          } else {
            data = {
              type: type,
              flag: this.checked,
              deviceType: this.deviceType,
              startTime: this.date1,
              groupId: this.groupId,
            };
          }
        } else {
          data = {
            type: type,
            flag: this.checked,
            deviceType: this.deviceType,
            startTime: this.date1,
            groupId: this.groupId,
          };
        }
      }

      let res = await service({
        method: "get",
        url: "/report/total-line-group",
        params: data,
      });
      this.getWeather();
      if (res.status == "SUCCESS") {
        this.loading = false;
      }
      let numberList = res.data;
      if (this.deviceType != 4) {
        if (!this.checked && this.selectLong == "天") {
          if (this.date1 == getToday()) {
            time1 = getTodayArr("1");
          } else {
            time1 = getTodayArr("2");
          }
        } else if (this.checked && this.selectLong == "天") {
          let date1 = this.date1;
          let date2 = this.date2;

          // time1 = getDateRange(date1, date2);
          time1 = completeTimeRange(date1, date2);
        } else if (!this.checked && this.selectLong == "周") {
          let week1 = this.date1;
          time1 = getWeekDateRange(week1);
        } else if (this.checked && this.selectLong == "周") {
          let week1 = this.date1;
          let week2 = this.date2;
          time1 = generateWeekRange(week1, week2);
        } else if (!this.checked && this.selectLong == "月") {
          time1 = getMonthDates(this.date1);
        } else if (this.checked && this.selectLong == "月") {
          time1 = generateMonthRange(this.date1, this.date2);
        } else if (!this.checked && this.selectLong == "年") {
          time1 = getYearMonths(this.date1);
        } else if (this.checked && this.selectLong == "年") {
          // time1 = generateMonthRange(this.date1, this.date2);
          time1 = getYearRange(this.date1, this.date2);
        }
      } else {
        if (!this.checked && this.selectLong == "天") {
          if (this.date1 == getToday()) {
            time1 = getTodayArr("1");
          } else {
            time1 = getTodayArr("2");
          }
        } else if (this.checked && this.selectLong == "天") {
          let date1 = this.date1;
          let date2 = this.date2;

          // time1 = getDateRange(date1, date2);
          time1 = completeTimeRange(date1, date2);
        } else if (!this.checked && this.selectLong == "周") {
          let week1 = this.date1;
          time1 = getWeekDateRange(week1);
        } else if (this.checked && this.selectLong == "周") {
          let week1 = this.date1;
          let week2 = this.date2;
          time1 = generateWeekRange(week1, week2);
        } else if (!this.checked && this.selectLong == "月") {
          time1 = getMonthDates(this.date1);
          console.log("time1=", time1);
        } else if (this.checked && this.selectLong == "月") {
          time1 = generateMonthRange(this.date1, this.date2);
        } else if (!this.checked && this.selectLong == "年") {
          time1 = getYearMonths(this.date1);
          console.log(time1);
        } else if (this.checked && this.selectLong == "年") {
          // time1 = generateMonthRange(this.date1, this.date2);
          time1 = getYearRange(this.date1, this.date2);
        }
      }
      let time = [],
        timeAndNumber = [],
        timeAndNumber1 = [],
        number = [],
        number1 = [];
      try {
        if (!numberList) {
          return this.$message({
            message: "获取分组相关数据失败",
            type: "warning",
          });
        }
      } catch (error) {}
      if (this.deviceType != 4) {
        if (!this.checked) {
          if (this.selectLong == "天") {
            if (numberList.length > 0) {
              numberList.forEach((item) => {
                const date = new Date(item[0]);
                // const hours = date.getHours();
                const hours = String(date.getHours()).padStart(2, "0");
                const minutes = String(date.getMinutes()).padStart(2, "0");
                timeAndNumber.push([`${hours}:${minutes}`, item[1]]);
              });
              timeAndNumber = completeMissingTimes(time1, timeAndNumber);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          } else if (this.selectLong == "周") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
            // this.option1 = this.optionBar;
          } else if (this.selectLong == "月") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
          } else if (this.selectLong == "年") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "月";
              });
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
          }
        } else if (this.checked) {
          if (this.selectLong == "天") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          } else if (this.selectLong == "周") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              numberList = formatNumberList(numberList);
              timeAndNumber = completeMissingTimes(time1, numberList);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          } else if (this.selectLong == "月") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "月";
              });
              timeAndNumber = completeMissingTimes(time1, numberList);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          } else if (this.selectLong == "年") {
            if (numberList.lengh == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "年";
              });
              timeAndNumber = [];
              timeAndNumber = completeMissingTimes(time1, numberList);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
            }
          }
          // if (number.length <= 7) {

          // } else {
          this.option1 = this.optionLine;
          // }

          if (number.length <= 7) {
            this.option1.xAxis.axisLabel.rotate = 0;
          } else {
            this.option1.xAxis.axisLabel.rotate = 45;
          }
        }
        this.option1 = this.optionLine;
        this.option1.xAxis.data = time;
        this.option1.series[0].data = number;

        this.option1.xAxis.axisLabel.rotate = 0;

        chrat1.setOption(this.option1, {
          notMerge: true, // 关键：禁用合并模式，完全替换
          lazyUpdate: true, // 可选：延迟更新以提高性能
        });
        totalNumber = number;
      } else {
        if (!this.checked) {
          if (this.selectLong == "天") {
            if (numberList.length > 0) {
              numberList.forEach((item) => {
                const date = new Date(item[0]);
                const hours = String(date.getHours()).padStart(2, "0");
                const minutes = String(date.getMinutes()).padStart(2, "0");

                timeAndNumber.push([
                  `${hours}:${minutes}`,
                  item[1] ? item[1] : 0,
                ]);
                timeAndNumber1.push([
                  `${hours}:${minutes}`,
                  item[2] ? item[2] : 0,
                ]);
              });
              timeAndNumber = completeMissingTimes(time1, timeAndNumber);
              timeAndNumber1 = completeMissingTimes(time1, timeAndNumber1);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            } else {
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            }
          } else if (this.selectLong == "周") {
            if (numberList.length == 0) {
              arrEach(time1, time, number, number1);
            } else {
              numberList = completeMissingTimes(time1, numberList);
              numberList.forEach((item) => {
                const [yearWeek, value, value1] = item;
                time.push(yearWeek);
                number.push(value);
                number1.push(value1);
              });

              console.log(numberList);
            }
          } else if (this.selectLong == "月") {
            if (numberList.length == 0) {
              time.push(time1[0]);
              number.push(time1[1]);
              number1.push(time1[1]);
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);

              arrEachThree(timeAndNumber, time, number, number1);
              // time.push(numberList[0][0] + "月");
              // number.push(numberList[0][1]);
              // number1.push(numberList[0][2]);
            }
          } else if (this.selectLong == "年") {
            if (numberList.length == 0) {
              arrEachThree(time1, time, number, number1);
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "月";
              });
              numberList = completeMissingTimes(time1, numberList);
              arrEachThree(numberList, time, number, number1);
            }
          }
        } else if (this.checked) {
          if (this.selectLong == "天") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const { array1, array2 } = transforCheckDay(numberList);
              timeAndNumber = completeMissingTimes(time1, array1);
              timeAndNumber1 = completeMissingTimes(time1, array2);

              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.selectLong == "周") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const { array1, array2 } = transformData(numberList);
              timeAndNumber = completeMissingTimes(time1, array1);
              timeAndNumber1 = completeMissingTimes(time1, array2);
              console.log(timeAndNumber, timeAndNumber1);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.selectLong == "月") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const [result1, result2] = deilWithMonth(numberList);
              timeAndNumber = completeMissingTimes(time1, result1);
              timeAndNumber1 = completeMissingTimes(time1, result2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.selectLong == "年") {
            if (numberList.lengh == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const [result1, result2] = deilWithYear(numberList);
              timeAndNumber = completeMissingTimes(time1, result1);
              timeAndNumber1 = completeMissingTimes(time1, result2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          }
        }
        userArr = number;
        upArr = number1;
        console.log("userArr==", userArr);
        console.log(upArr);
        productEle = [];
        for (let i = 0; i < userArr.length; i++) {
          productEle.push(Math.round((userArr[i] + upArr[i]) * 100) / 100);
        }
        console.log(productEle);
        // productEle=
        // if (!this.checked && this.selectLong == "天") {
        this.option1 = this.option1GuangDay;

        this.option1.xAxis.data = time;

        this.option1.series[0].data = number;
        this.option1.series[1].data = number1;

        chrat1.setOption(this.option1, {
          notMerge: true, // 关键：禁用合并模式，完全替换
          lazyUpdate: true, // 可选：延迟更新以提高性能
        });
      }
    },
    changeShow() {
      if (this.changePageName == "分组大屏") {
        this.$router.push("/homePageFen");
      } else if (this.changePageName == "首页大屏") {
        this.$router.push("/homePage");
      }
    },
    convertMinutesToHours(minutes) {
      // 确保输入是数字
      if (typeof minutes !== "number" || isNaN(minutes)) {
        return "0分钟";
      }

      // 处理负数情况
      if (minutes < 0) {
        return "0分钟";
      }

      const hours = Math.floor(minutes / 60);
      const remainingMinutes = minutes % 60;

      let result = "";

      if (hours > 0) {
        result += `${hours}小时`;
      }

      if (remainingMinutes > 0) {
        result += `${remainingMinutes}分钟`;
      }

      // 如果总分钟数为0
      if (result === "") {
        return "0分钟";
      }

      return result;
    },
    async getSplit() {
      let res = await service({
        method: "GET",
        url: "/group/find-all",
      });
      this.selectFenList = res.data;

      this.selectFen = this.selectFenList[0].name;
      this.groupId = this.selectFenList[0].id;

      this.oneGroup = this.selectFenList[0].deviceList;
      this.selectSmallList = this.selectFenList[0].deviceList;
      this.selectSmallFen = this.selectSmallList[0].name;
      this.deviceId = this.selectFenList[0].deviceList[0].id;
      this.defaultValue = this.selectFenList[0].deviceList[0].defaultValue;
      this.deviceType = this.selectFenList[0].deviceList[0].type;
      this.getDeviceNumberId = this.selectFenList[0].deviceList[0].id;
      this.getDeviceNumberType = this.selectFenList[0].deviceList[0].type;
      this.getGroupType();
      this.getLineNumber();
      this.getDeviceNumber();
      this.getCOLineNumber();
      this.getWaring();
      this.getStatus();
      // this.chooseType = this.chooseTypeList[0];
    },
    selectBig() {
      this.selectFenList.forEach((item) => {
        if (item.name == this.selectFen) {
          this.oneGroup = item.deviceList;
          this.selectSmallList = item.deviceList;
          this.selectSmallFen = this.selectSmallList[0].name;
          this.groupId = item.id;
          this.deviceId = item.deviceList[0].id;
          this.getDeviceNumberId = item.deviceList[0].id;
          this.getDeviceNumberType = item.deviceList[0].type;
          this.deviceType = item.deviceList[0].type;
          this.defaultValue = item.deviceList[0].defaultValue;
          // this.getGroupType();
          this.hourTime = "";

          // this.chooseType = chooseTypeList[0];
        }
      });
      this.getGroupType();
      this.getLineNumber();
      this.getDeviceNumber();
      this.getStatus();
      this.getWaring();
      this.getCOLineNumber();
      if (this.deviceType == 2) {
        this.changeFristName = "燃气用量";
      } else {
        this.changeFristName = "总用电量";
      }
    },
    initChart() {
      this.option1.xAxis.data = [];
      this.option1.series[0].data = [];
      chrat1 = echarts.init(document.getElementsByClassName("chart1")[0]);
      chrat1.setOption(this.option1);

      chart5 = echarts.init(document.getElementsByClassName("chart5")[0]);
      chart5.setOption(this.option3);
      chart6 = echarts.init(document.getElementsByClassName("chart6")[0]);
      chart6.setOption(this.option4);
      chart7 = echarts.init(document.getElementsByClassName("chart7")[0]);
      chart7.setOption(this.option5);
    },
    backIndexPage() {
      this.$router.push("/index");
    },
    handleResize() {
      if (chrat1) {
        chrat1.resize();
      }
      if (chart2) {
        chart2.resize();
      }
      if (chart3) {
        chart3.resize();
      }
      if (chart4) {
        chart4.resize();
      }
      if (chart5) {
        chart5.resize();
      }
      if (chart6) {
        chart6.resize();
      }
      if (chart7) {
        chart7.resize();
      }
    },
    chooseTime(a) {
      let element = document.getElementsByClassName("smallChoose");
      for (let i = 0; i < element.length; i++) {
        element[i].style.background = "#BABABA";
      }
      a.target.style.background = "#00A4FF";
    },
    chooseTime1(a) {
      let element = document.getElementsByClassName("smallChoose1");
      for (let i = 0; i < element.length; i++) {
        element[i].style.background = "#BABABA";
      }
      a.target.style.background = "#00A4FF";
    },
    async getGroupType() {
      let res = await service({
        method: "get",
        url: "/group/type-list",
        params: {
          groupId: this.groupId,
        },
      });
      this.chooseTypeList = res.data;
      // this.selectSmallList = [];
      // this.oneGroup.forEach((item) => {
      //   if (item.type == res.data[0]) {
      //     this.selectSmallList.push(item);
      //   }
      // });
      // this.selectSmallFen = this.selectSmallList[0].name;

      this.chooseTypeList1 = [];
      this.chooseTypeList.forEach((item) => {
        if (item == 1) {
          this.chooseTypeList1.push({
            name: "电",
            value: 1,
          });
        } else if (item == 2) {
          this.chooseTypeList1.push({
            name: "燃气",
            value: 2,
          });
        } else if (item == 3) {
          this.chooseTypeList1.push({
            name: "水",
            value: 3,
          });
        } else if (item == 4) {
          this.chooseTypeList1.push({
            name: "光伏",
            value: 4,
          });
        }
      });
      this.chooseType = this.chooseTypeList1[0].name;
    },
    changeType() {
      // this.selectSmallList = [];
      if (this.chooseType == "电") {
        this.oneGroup.forEach((item) => {
          if (item.type == 1) {
            // this.selectSmallList.push(item);
            this.deviceType = 1;
            this.changeFristName = "总用电量";
          }
        });
        this.deviceId = this.selectSmallList[0].id;
        this.getLineNumber();
        // this.getDeviceNumber();
        this.selectSmallFen = this.selectSmallList[0].name;
      } else if (this.chooseType == "燃气") {
        this.oneGroup.forEach((item) => {
          if (item.type == 2) {
            // this.selectSmallList.push(item);
            this.deviceType = 2;
            this.changeFristName = "燃气用量";
          }
        });
        this.deviceId = this.selectSmallList[0].id;
        this.getLineNumber();

        this.selectSmallFen = this.selectSmallList[0].name;
      }
    },
    async getStatus() {
      let res = await service({
        mthod: "get",
        url: "/report/device-state-group",
        params: {
          groupId: this.groupId,
        },
      });
      // let all=

      if (res.data) {
        this.allDevice = res.data.offLine + res.data.onLine + res.data.warmNum;
        this.deviceStatus.online = res.data.onLine;
        this.deviceStatus.offline = res.data.offLine;
        this.deviceStatus.warn = res.data.warmNum;
        let allLineSmall = document.getElementsByClassName("lineSmall");
        allLineSmall[0].style.width =
          (this.deviceStatus.online / this.allDevice) * 100 + "%";
        allLineSmall[1].style.width =
          (this.deviceStatus.warn / this.allDevice) * 100 + "%";
        allLineSmall[2].style.width =
          (this.deviceStatus.offline / this.allDevice) * 100 + "%";

        this.option3.series[0].data[0] = {
          name: "离线设备",
          value: this.deviceStatus.offline,
        };
        this.option3.series[0].data[1] = {
          name: "告警设备",
          value: this.deviceStatus.warn,
        };
        this.option3.series[0].data[2] = {
          name: "正常设备",
          value: this.deviceStatus.online,
        };
      }
      chart5.setOption(this.option3);
    },
  },
  watch: {
    chooseType(oldVal, newVal) {
      if (oldVal == "电") {
        this.option1.yAxis.name = "单位:KW.h";

        this.optionLine.yAxis.name = "单位:KW.h";
        this.optionLine.legend.data = ["总功耗"];
        this.optionLine.series[0].name = "总功耗";
      } else if (oldVal == "燃气") {
        this.option1.yAxis.name = "单位:m³";

        this.optionLine.yAxis.name = "单位:m³";
        this.optionLine.legend.data = ["总气耗"];
        this.optionLine.series[0].name = "总气耗";
      }
      chrat1.setOption(this.option1);
    },
  },
  created() {
    // this.getRenderList();
    const today = new Date(); // 获取当前日期对象

    // 提取年、月、日并补零
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需+1
    const day = String(today.getDate()).padStart(2, "0");

    // 组合成 YYYY-MM-DD 格式
    this.date1 = `${year}-${month}-${day}`;
    this.deviceDate1 = `${year}-${month}-${day}`;
    this.CODate1 = `${year}-${month}-${day}`;
    this.getSplit();
    this.getWeather();
  },
  mounted() {
    let t = getToday();
    this.$nextTick(() => {
      this.initChart();
      window.addEventListener("resize", this.handleResize);
      this.getStatus();
    });
    if (window.screen.availWidth > 1920) {
      this.bigScreen = true;
    }
    this.findWeatherCategory("大暴雨");
  },
  beforeUnmount() {
    // Vue 3（Vue 2 用 beforeDestroy）
    window.addEventListener("resize", this.handleResize);
  },
};
</script>
<style lang="less" scoped >

.forgroup{
  display: flex;
.selectName{
  font-size: 1vw;
  line-height: 3.5vh;
  color: white;
  margin-right: 0.5vw;
}
}
.changePage{
  width: 8vw;
  height: 4vh;
  position: absolute;
  left: 7vw;
  top: 5vh;
}
.deleteWeek {
  font-size: 0.8vw;
  color: white;
  margin-left: 0.3vw;
}
:deep(.el-checkbox__inner){
border:1px solid #0281B8;
}
.bigUnit{
  :deep(.el-select__selected-item ,.el-select__placeholder){
  color: white;
  font-size: 0.8vw;
  height:3vh!important;
  display: flex
  ;
  align-items: center;
}
:deep(.el-select__icon )
{
  color: white;
  font-size: 0.7vw!important;
}
:deep( .el-select__wrapper) {
  height: 3vh !important;
}
}

:deep(.el-select__selected-item ,.el-select__placeholder){
  color: white;
  font-size: 0.8vw; height:3vh!important;
  display: flex;
  align-items: center;
}
:deep(.el-select__icon )
{
  color: white;
  font-size: 0.7vw!important;
}
:deep( .el-select__wrapper) {
  height: 3vh !important;
  color: white;
}
:deep(.el-select__selected-item span){
    color: white!important;
  }


:deep(.el-table__row td) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
:deep(.el-table__cell) {
  padding-top: 0 !important;
  /* padding-bottom: 0 !important; */
}

.el-datePicker{
  font-size: 1vw;
}
:deep(.el-input__inner,.el-input__inner::placeholder){
  color:white;font-size: 0.8vw;
}

:deep(.el-input__inner){
  color: white;
  height: 3.5vh !important;
}
:deep(.el-input--prefix){
 height: 3.5vh !important;
}
:deep(.el-input__wrapper){
  padding-left:0.5vw!important;
  height: 3.5vh!important;
}
:deep(.el-input__icon ){
  color: white;
 font-size: 0.7vw;
}
.tableContain{
  width: 88%;
  margin: 0 auto;
}
.el-table {
  font-size: 0.6vw;
}
.el-table_1_column_1 span{
  height:4vh!important
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background-color: rgba(0,0,0,0) !important;
}


.table-container-4k {
  transform: scale(2);
  transform-origin: 0 0;
  width: 50%;  /* 缩放后宽度会加倍，所以需要减半 */
  height: 50%; /* 同理高度减半 */
}


.pageContain {
  width: 100%;
  height: 100vh;
  background: url(@/assets/img/big/bigBack.png);
  background-size: 100% 100%;
  overflow: hidden;
}
.bigTop {
  width: 99vw;
  height: 7.3vh;
  background: url(@/assets/img/big/bigTop.png);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;

  background-size: 100% 100%;
  .bigTopName {
    margin-top: -1vh;
    background: linear-gradient(to bottom, white, #0df4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8vw;
    letter-spacing: 0.2vw;
    font-weight: 800;
    font-family: smallMenu;
  }
}
.bigCenter {
  width: 95vw;
  padding-top: 2vh;
  margin: auto;
  justify-content: space-between;
  .bigLeft {
    width: 62.7vw;

    // height: 30.6vh;
    // background: url(@/assets/img/big/bigLeft.png);
    // background-size: 100% 100%;
    .bigLeftTop {
      width: 62.7vw;
      height: 26vh;
      background: url(@/assets/img/big/bigLeft.png);
      background-size: 100% 100%;

      // overflow: hidden;
      .bigTopUse {
        padding-top: 1vh;
        height: 5vh;

        .bigUnit {
          padding-top: 1vh;
          color: white;
          display: flex;
          font-size: 0.6vw;
          margin-right: 1vw;
          height: 4vh;
          .el-select {
            margin-left: 0.5vw;
          }
        }
      }
    }
  }
  .bigRight {
    width: 31.56vw;
    .bigRightTop {
      width: 31.56vw;
      height: 37.2vh;
      background: url(@/assets/img/big/bigLeft.png);
      background-size: 100% 100%;
    }
  }
}
.bigChartName {
          margin-left: 1vw;
          background: linear-gradient(to bottom, white, #0df4ff);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 1.5vw;
          letter-spacing: 0.1vw;
          font-weight: 800;
          font-family: smallMenu;
        }
.backIndex {
  width: 1.77vw;
  height: 2.88vh;
  background: url(@/assets/img/big/bigBackIndex.png);
  background-size: 100% 100%;
  position: absolute;
  left: 4vw;
  top: 5vh;
}
.chart1Contain {
  width: 100%;
  height: 233px;

}
// :deep(.el-table .cell) {
//   padding: 0 !important;
// }
// :deep(.cell) {
//   padding: 0 !important;
// }
/* 在你的全局样式文件（例如 main.css 或 App.vue 的 <style>）中 */
.el-table .el-table__body tr {
  background-color: transparent !important; /* 设置为透明背景 */
}

.chart2,
.chart3,
.chart4 {
  width: 6.7vw;
  height: 12.1vh;
}
.chart1 {
  width: 100%;
  height:19vh;
  margin-top:3vh
  // background: red;
}
.useElect {
  width: 100%;
  height: 30px;
  padding-bottom: 10px;
}
.useAll {
  color: black;
}
.useAllElect {
  width: 100%;
  // height: 200px;
  border: 1px solid black;
  padding: 10px 0;
}
.bigNameContain{
  width: 100%;

    .bigDot{
      width: 0.5vw;
      height: 0.5vw;
      background: red;
      border-radius: 50%;
    }
    .bigName {
      // width: 100%;
      color: white;
      font-weight: 600;
      text-align: center;
      font-size: 1.3vw;
      margin-left: 0.2vw;
    }
    }
.oneContain {
    flex: 1;
    .bingContain {
      width: 100%;
      height: 10vh;
      .powerAll {
        font-size: 1vw;
        color: white;
        div{
          span{
            color:#EC66EF
          }
        }
      }
    }
  }

.rightCalerd {
  width: 30%;
  height: 100%;
  color: black;
  .hour {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .hourOne {
      width: 16%;
      span {
        width: 30px;
        height: 30px;
        display: block;
        border-radius: 50%;
        border: 1px solid black;
        line-height: 30px;
        text-align: center;
        margin-top: 5px;
      }
    }
  }
}
.shebeiContain {
  width: 88%;

  display: flex;
  align-items: center;
  margin: auto;
  justify-content: space-between;
  // height: 400px;
  // margin-bottom: 5px;
  overflow: hidden;

  .chart5 {
    width: 10.4vw;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: red;
  }
  .rightText {
    width: 15vw;
    // height: 100%;
    // margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: white;
    .textBox {
      height: 8.9vh;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      margin-top: 1vh;
      text-align: center;
      background: url(@/assets/img/big/shebei.png);
      background-size: 100% 100%;
      .textBoxTop{
        width: 11.77vw;
        margin:0 auto;
        margin-top: 1vh;
.boxLeft{
  width: 100%;
  display: flex;
  align-items: center;
  .dot{
    width:0.78vw;
    height: 0.78vw;
    border-radius: 50%;
    background: linear-gradient(to right, #00F0F2, #00BD36);
  }
  .dotName{
    font-size: 1vw;
    margin-left:0.5vw
  }
}

      }
    }
  }
}
.endName{
  font-size: 1.4vw;
  font-weight: 800;
}
.sheBeiLine{
  width: 11.77vw;
  height: 1.5vh;
  background: url(@/assets/img/big/lineBack.png);
  background-size: 100% 100%;
  margin:0 auto;
  margin-top: 1vh;
  overflow: hidden;
  .lineSmall{
    width:60%;
    height: 100%;
    border-radius: 0.75vh;
    background: linear-gradient(to right, #00EFEF, #00BE39);
  }
}

.bigBingContain{

  width: 95%;
  margin: auto;
  margin-top: 5vh;

  display: flex;
  align-items: center;
  justify-content: center;
  .bigLeftArr{
    width:3.7vw;
    height: 10.5vh;
    background: url(@/assets/img/big/bigLeftArr.png);
    background-size: 100% 100%;
  }
  .bigRightArr{
    width:3.7vw;
    height: 10.5vh;
    background: url(@/assets/img/big/bigRIghtArr.png);
    background-size: 100% 100%;
  }
  .bigBing{
display: flex;
width: 50vw;
  }
}
.smallRightLast{
  width: 31.56vw;
  height: 48vh;
  background: url(@/assets/img/big/bigBoxLast.png);
  background-size: 100% 100%;
  margin-top: 2.3vh;
}
.manySmallContain{

  height: 23vh;
  background: url(@/assets/img/big/homeBottom.png);
  background-size: 100% 100%;
  margin-top: 2vh;
  padding:0;

  .everyCharts{
    margin-left: 1vw;
    width: 46vw;
    height: 18.6vh;
    background: url(@/assets/img/big/honeOne.png);
    background-size: 100% 100%;
  }
}
.topSelect{

  width: 100%;
  height: 4vh;
  // background: blue;
  margin: auto;
  padding-top: 3vh;
}
.chooseWhich{
  height: 4vh;
  .smallChoose{
    width: 2vw;
    height: 3vh;
    font-size: 0.8vw;
    margin-left: 0.5vw;
    background:#BABABA;
    color: white;
  }
  .smallChoose1{
    width: 2vw;
    height: 3vh;
    font-size: 0.8vw;
    margin-left: 0.5vw;
    background:#BABABA;
    color: white;
  }
}
.chart6,.chart7{
  width: 100%;
  margin: auto;
  height: 20vh;
  margin-top: 3vh;
  // background: red;
}
.chart6{
  margin-top: 2.7vh;
}
.selected-item,.weatherInner{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height: 100%;
  // color: white;
  font-size: 0.6vw;
}
.selected-item{
  color:'white'

}
</style>
